<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todolist</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            background-color: rgb(205, 205, 205);
            height: 100%;
        }

        #app {
            display: flex;
            flex-direction: column;
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            color: white;
        }

        #head {
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-shrink: 0;
            padding: 20px;
            background-color: rgb(50, 50, 50);

        }

        #input {
            flex-grow: 1;
            height: 50px;
            margin: 10px 20px 0 100px;
            padding-left: 15px;
            font-size: 16px;
            border-radius: 10px;
            outline: none;
        }

        #add {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            margin-top: 10px;
        }

        .body-head {
            display: flex;
            flex-shrink: 0;
            justify-content: space-between;
            padding: 20px;
            background-color: orange;

        }

        .num {
            height: 16px;
            line-height: 16px;
            padding: 0 2px 16px 2px;
            color: red;
            font-weight: bold;
            text-align: center;
            border: 2px solid green;
            border-radius: 50%;

        }

        .body {
            flex-grow: 1;
            overflow: auto;
        }

        .todo {
            padding-left: 50px;
            color: black;


        }

        .do {

            margin: 10px 20px 10px 0;
            padding: 16px;
            border: 1px solid red;
            font-size: 20px;
            font-weight: bold;
            border-radius: 15px;
        }
    </style>
</head>

<body>

    <div id="app">
        <div id="head">
            <h1>toDoList</h1>
            <input type="text" v-on:keydown="keyDown" v-model="msg" placeholder="请输入要待办的事项" id="input">
            <button v-on:click="btnClick" id="add">新增</button>
        </div>


        <div class="body">
            <div class="body-head">
                <h2>待办事项:</h2>
                <div class="num">{{index}}</div>
            </div>
            <ol class="todo">
                <li class="do" v-for="item in list">{{item}}</li>
            </ol>

        </div>

    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                // v-model的双向绑定获取input标签中的内容
                msg: "",
                // 输入的索引
                index: 0,
                // 存储input每次输入的内容
                list: [],
            },
            // 生命周期
            created() {
                // 进行判断 如果为空是不赋值给list
                this.list = JSON.parse(localStorage.getItem("list")) || [];

                this.index = this.list.length;
            },

            watch() {
                localStorage.setItem("list", JSON.stringify(this.list));

            },


            methods: {
                btnClick() {
                    let message = this.msg.trim();
                    // 判断输入内容不为空
                    if (this.clearTimer) {
                        clearTimeout(this.clearTimer)
                    };
                    this.clearTimer = setTimeout(() =>{

                        if(message) {
                        if (this.list.indexOf(message) > -1) {
                            alert("您输入的事项已存在")
                        } else {
                            this.list.push(message);
                            this.index++;
                        }
                    } else {
                        alert("您输入的事项为空");
                    }
                        this.msg = "";
                    } , 1000);



            },
            keyDown(e) {
                console.log(e.keyCode);
                if (e.keyCode == 13) {
                    this.btnClick();
                }
            },
        },

        });



    </script>
</body>

</html>